JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at better ways to manipulate arrays and looping through them.
Use the for…of Loop
The for...of loop is a loop that’s introduced with ES2015 to iterate through each entry of an iterable object.
This loop is the best loop for looping through all entries of an iterable object because it works with any kinds of iterable objects, including arrays, the arguments object, maps, sets, and DOM Node lists.
It’s much better than the regular for loop and the while loop because we don’t have to worry about setting the indexes and loop conditions.
All we have to do is to use the for...of loop and reference the object that we want to loop through.
For instance, we can use it to loop through an array as follows:
const arr = [1, 2, 3];
for (const a of arr) {
console.log(a);
}
In the code above, we used the for...of loop on the arr array to loop through all the entries of arr .
Another good thing about using for...of is that we can use const to make sure that we can’t change the entry that’s being looped through, which is a .
This is a feature that isn’t available with any other kinds of loops.
We can also loop through other iterable objects like maps as follows:
const map = new Map([
['a', 1],
['b', 2]
]);
for (const [key, value] of map) {
console.log(key, value);
}
In the code above, we created a new Map instance. Then we can loop through the map object and extract the key and value with the destructuring syntax as we did above.
The for...of loop is the only kind of JavaScript loop that lets us destructure items right inside the loop.
The destructuring syntax lets us extract the items easily and clearly. Therefore, it’s less error-prone than regular for or while loops as we can do a lot all in one line while retaining the clarity of our code.
Use Array.isArray() to Check If a Variable is an Array
Array.isArray() is the most reliable method to check if a variable or a value is an array.
It’s the most reliable method to determine if something is an array because it works for arrays from different iframes or document objects.
We should use this instead of alternatives like instanceof because of the possibility of having multiple global objects existing.
Multiple iframes and tabs will have multiple Array objects, and their Array.prototype property will all be different. To make sure that we check through all of them, we have to use Array.isArray instead of arr instanceof Array .
Checking the constructor property has the same problem as the instanceof check.
Therefore, we should use Array.isArray to check if a value or variable is an array since it checks all global Array objects to see if it’s an instance of them.
For instance, we can use it as follows:
const foo = [1, 2, 3];
const isArray = Array.isArray(foo);
In the code above, we just called Array.isArray on foo , which returns true if foo is an array and false otherwise.
Therefore, isArray should be true since foo is an array.
Array Instance’s Map Method
Array instance methods are there for a good reason. They are very useful for manipulating the array instance or returning something derived from the array instance.
The map method lets us convert all the values of the array instance and return a new array with all the existing array instance’s values converted with the callback function that we pass into the map method.
Using map is better than using loops and pushing entries to a new array for example since we write less code to do the same thing.
Therefore, there’s no reason not to use a cleaner way with map than using loops.
For example, we can use it as follows:
const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
In the code above, we called map on arr with the callback x => x * 2 to double every entry of arr , put them all in a new array in the same order, and return it.
Therefore, doubled is:
[
2,
4,
6
]
Conclusion
To write robust code that deals with arrays, we should use the for...of loop to loop through all entries of an iterable object.
This way, we don’t have to deal with indexes and loop conditions, and it works with all iterable objects.
Also, the destructuring syntax works with it.
The most reliable way to check if a variable or a value is an array is the Array.isArray method since it works for situations where multiple versions of a global object exist when dealing with iframes.
Finally, the array instance’s map method is the best way to convert all values of an original array to new ones by returning the new one.
